

<template>
    <div>
        <div>
            <div class="student-top" style="background-color:white;">
                <span>
                    <div class="student-logo"><img border="0"  src="https://www.ketangpai.com/images/common/logo_blue.png" width="128" height="32" align="top"/></div>
                    <a @click="returnCourse" target="_self"  style="color:black;margin-left: 30px;font-weight: bold;">我的课堂&nbsp;&nbsp;</a>
                    <span style="margin-right:530px;">> &nbsp;课程设置</span>
                    <a href="" target="_self"  class="one">Ai工作集</a>
                    <a href="" target="_self" class="one">
                        <span class="iconfont">&#xe620;</span>
                        论文查重
                    </a>
                    <a href="" target="_self" class="one">
                        <span class="iconfont">&#xe6aa;</span>
                        任务管理
                    </a>
                     <button style="border:none;position: absolute;top: 21px;background-color: white;">
                        <span class="iconfont" style=" font-size:23px;padding-top: 0px;">&#xe668;</span>
                    </button>
                    <el-dropdown  trigger="click" style="margin-left: 30px;">
                          <el-avatar :size="40" style="margin-left: 20px;position: absolute;top :15.5px" icon="el-icon-user-solid" ></el-avatar>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item>
                                <span class="iconfont">&#xe674;</span>
                                开通VIP
                            </el-dropdown-item>
                            <el-dropdown-item> 
                                <span class="iconfont">&#xe611;</span>
                                机构用户认证
                            </el-dropdown-item>
                            <el-dropdown-item @click="person">
                                <span class="iconfont">&#xe656;</span>
                                个人设置
                            </el-dropdown-item>
                            <el-dropdown-item @click="returnLogin">
                                <span class="iconfont">&#xe60a;</span>
                                退出登录
                            </el-dropdown-item>
                          </el-dropdown-menu>
                            
                        </template>
                    </el-dropdown>
                </span>
            </div>
            <hr/>
        </div>
        <div style="margin-top: 20px;padding: 10px 100px;">
            <div>
                <span :style="{ color: informationVisible ? '#4285f4' : 'black' }" style="margin-right: 40px;cursor: pointer;" @click="informationVisible=true">基本信息（必填）</span>
                <span >报名设置</span>
            </div>
            <div style="margin-top: 30px;background-color:aliceblue;">
                <div v-if="informationVisible" style="padding: 40px 25px 25px 25px;">
                    <div>
                        <span style="color: black;font-size: medium;font-weight: bold;">基本信息</span>
                        <el-button v-if="!editFormVisible" style="float: right;" type="primary" @click="edit">编辑</el-button>
                        <el-button v-if="editFormVisible"  @click="update" style="float: right;" type="primary">保存</el-button>
                        <el-button v-if="editFormVisible" @click="editFormVisible=false"  style="float: right;margin-right: 10px;">取消</el-button>
                    </div>
                    <div v-if="!editFormVisible" style="margin-top: 40px;background-color: white;border: 1px solid #dadce0;border-left: 5px solid #4285f4;border-radius: 5px;">
                        <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
                            <span>课程名称</span>
                            <span style="color: #5b5e61;margin-left: 60px;" >{{ currentCourse.courseName }}</span>
                        </div>
                        <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
                            <span>教学班级</span>
                            <span style="margin-left: 60px;">{{ currentCourse.clazz }}</span>
                        </div>
                        <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
                            <span>学期-学年</span>
                            <span style="margin-left: 60px;">{{ currentCourse.academicYear+"-"+currentCourse.semester }}</span>
                        </div>
                        <div style="padding: 15px 25px;height: 55px;">
                            <div style="float: left;padding-top: 15px;">机构相关</div>
                            <div style="float: left;">
                                <span style="margin-left: 60px;">  
                                <el-switch v-model="value" />
                                <span :style="{color:value?'#4285f4':'black'}" >&nbsp;对机构后台可见</span>
                            </span>
                            <br/>
                            <span style="margin-left: 60px;">开启后，机构后台管理员可以看见该教师在线上开设的课程及教学情况</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="editFormVisible" style="margin-top: 40px;background-color: white;border: 1px solid #dadce0;border-left: 5px solid #4285f4;border-radius: 5px;">
                        <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
        <span>课程名称</span>
        <el-input 
            v-model="courseName" 
            style="color: #5b5e61;margin-left: 60px;width: 600px;" 
            :placeholder="currentCourse.courseName" 
        ></el-input>
    </div>
    <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
        <span>教学班级</span>
        <el-input 
            v-model="clazz" 
            style="margin-left: 60px;width: 300px;" 
            :placeholder="currentCourse.clazz ? currentCourse.clazz : '请输入教学班级'"
        ></el-input>
    </div>
    <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
        <span>学期-学年</span>
        <span style="margin-left: 53.5px;" :placeholder="currentCourse.academicYear + currentCourse.semester"></span>
        <el-select
            v-model="academicYear"
            placeholder="currentCourse.academicYear"
            size="large"
            style="width: 240px"
        >
            <el-option
                v-for="item in academicYears"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <el-select
            v-model="semester"
            placeholder="currentCourse.semester"
            size="large"
            style="width: 240px"
        >
            <el-option
                v-for="item in semesters"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
    <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
        <span>学时数</span>
        <el-input 
            v-model="courseHour" 
            style="margin-left: 76.5px;width: 300px;" 
            :placeholder="currentCourse.courseHour ? currentCourse.courseHour : '请输入学时数'"
        ></el-input>
    </div>
    <div style="border-bottom: 1px solid #dadce0;padding: 15px 25px;">
        <span>授课地点</span>
        <el-input 
            v-model="courseLocation" 
            style="margin-left: 60px;width: 300px;" 
            :placeholder="currentCourse.courseLocation ? currentCourse.courseLocation : '请输入授课地点'"
        ></el-input>
    </div>
    <div style="padding: 15px 25px;height: 55px;border-bottom: 1px solid #dadce0;">
        <div style="float: left;padding-top: 15px;">机构相关</div>
        <div style="float: left;">
            <span style="margin-left: 60px;">  
                <el-switch v-model="value" />
                <span :style="{color: value ? '#4285f4' : 'black'}">&nbsp;对机构后台可见</span>
            </span>
            <br/>
            <span style="margin-left: 60px;">开启后，机构后台管理员可以看见该教师在线上开设的课程及教学情况</span>
        </div>
    </div>
    <div style="padding: 15px 25px;height: 36px;">
        <div style="float: left;padding-top: 8px;">
            <span>课程介绍</span>
        </div>
        <textarea 
            v-model="courseDetail" 
            style="float: left;margin-left: 60px;width: 300px;" 
            :placeholder="currentCourse.courseDetail"
        ></textarea>
    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Storage from '../../utils/storage.js';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { post } from '../../utils/request';
export default {
    name: "CourseSetPage",
    setup() {
        const router = useRouter();
        const currentCourse = Storage.getSession("currentCourseMember");

        // 初始化绑定变量
        let courseName = ref(currentCourse.courseName);
        let clazz = ref(currentCourse.clazz);
        let academicYear = ref(currentCourse.academicYear);
        let semester = ref(currentCourse.semester);
        let courseHour = ref(currentCourse.courseHour);
        let courseLocation = ref(currentCourse.courseLocation);
        let courseDetail = ref(currentCourse.courseDetail);
        let value = ref(false); // 对机构后台可见

        // 其他变量
        let isElementVisible = ref(false);
        let informationVisible = ref(true);
        let editFormVisible = ref(false);

        const academicYears = ref([
            { value: '2022 - 2023', label: '2022 - 2023' },
            { value: '2023 - 2024', label: '2023 - 2024' },
            { value: '2024 - 2025', label: '2024 - 2025' },
            { value: '2021 - 2022', label: '2021 - 2022' },
            { value: '2020 - 2021', label: '2020 - 2021' },
        ]);

        const semesters = ref([
            { value: '全年', label: '全年' },
            { value: '第一学期', label: '第一学期' },
            { value: '第二学期', label: '第二学期' },
        ]);

        // 保存方法
        const update = async() => {
            const updatedCourse = {
                id:currentCourse.id,
                courseName: courseName.value,
                clazz: clazz.value,
                academicYear: academicYear.value,
                semester: semester.value,
                courseHour: courseHour.value,
                courseLocation: courseLocation.value,
                courseDetail: courseDetail.value,
            };
            console.log(updatedCourse)
            try {
                const response = await post('/course/update', updatedCourse);
                console.log(response);
                // 更新本地存储或发送到后端
                // currentCourse.value=updatedCourse
                Storage.setSession("currentCourseMember", updatedCourse);

                // 关闭编辑表单
                editFormVisible.value = false;
                
            } catch (e) {
                console.log(e);
            }
            

            
        };

        // 其他方法
        const show = () => {
            isElementVisible.value = !isElementVisible.value;
        };

        const returnCourse = () => {
            Storage.removeSession("courseSetting");
            router.push('/teacherPage');
        };

        const returnLogin = () => {
            Storage.removeSession("user");
            router.push('/login');
        };

        const edit = () => {
            editFormVisible.value = true;
        };

        return {
            returnCourse,
            currentCourse,
            value,
            semester,
            semesters,
            academicYears,
            academicYear,
            isElementVisible,
            show,
            returnLogin,
            informationVisible,
            editFormVisible,
            edit,
            update, // 返回保存方法
            courseName,
            clazz,
            courseHour,
            courseLocation,
            courseDetail
        };
    },
};
</script>